import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import PxToDp from '../../../utils/PxToDp';
import FontFamilys from '../../../utils/FontFamilys';
import CommonStorage from '../../../utils/CommonStorage';

class PersonalInfo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dealerName: '',
      salerName: '',
    };
  }

  async componentWillMount() {
    const dealerNames = await CommonStorage.getStorage('dealerName');
    const name = await CommonStorage.getStorage('salerName');
    if (dealerNames !== 'NotFoundError' && dealerNames !== 'ExpiredError') {
      this.setState({ dealerName: dealerNames.value });
    }
    if (name !== 'NotFoundError' && name !== 'ExpiredError') {
      this.setState({ salerName: name.value });
    }
  }

  render() {
    const { user, bill } = this.props;
    return (
      <View>
        <LinearGradient
          colors={['#1b8bff', '#4cbbff']}
          style={styles.linerTop}
          start={{ x: 0, y: 1 }}
          end={{ x: 1, y: 1 }}
        >
          <View style={[styles.itemLiner, styles.row]}>
            <Text style={styles.linerName}>经销商</Text>
            <Text style={[styles.linerConT]}>{this.state.dealerName}</Text>
          </View>
          <View style={[styles.itemLiner, styles.row]}>
            <Text style={styles.linerName}>经销商地址</Text>
            <Text style={[styles.linerConT]}>{bill.pickplace}</Text>
          </View>

          <View style={[styles.itemLiner, styles.row]}>
            <Text style={styles.linerName}>试驾车型</Text>
            <Text style={[styles.linerConT]}>{bill.carname}</Text>
          </View>
        </LinearGradient>
        <View style={styles.section}>
          <View style={styles.titleView}>
            <Text style={styles.sectionTitle}>客户信息</Text>
          </View>

          <View style={[styles.conViewItem, styles.row]}>
            <View style={styles.row}>
              <Image source={require('../../../img/detail/online-contrast-people.png')} />
              <Text style={styles.itemTitle}>姓名</Text>
            </View>
            <Text style={[styles.itemContent]}>{user.username}</Text>
          </View>
          <View style={styles.line} />

          <View style={[styles.conViewItem, styles.row]}>
            <View style={styles.row}>
              <Image source={require('../../../img/detail/online-contrast-phone.png')} />
              <Text style={styles.itemTitle}>电话</Text>
            </View>
            <Text style={[styles.itemContent]}>{user.phone}</Text>
          </View>
          <View style={styles.line} />

          <View style={[styles.conViewItem, styles.row]}>
            <View style={styles.row}>
              <Image source={require('../../../img/detail/online-contrast-fale.png')} />
              <Text style={styles.itemTitle}>性别</Text>
            </View>
            <Text style={[styles.itemContent]}>{user.sex}</Text>
          </View>
          <View style={styles.line} />

          <View style={[styles.conViewItem, styles.row]}>
            <View style={styles.row}>
              <Image source={require('../../../img/detail/online-contrast-adress.png')} />
              <Text style={styles.itemTitle}>所在地</Text>
            </View>
            <Text style={[styles.itemContent]}>{user.address}</Text>
          </View>
          <View style={styles.line} />

          <View style={[styles.conViewItem, styles.row]}>
            <View style={styles.row}>
              <Image source={require('../../../img/detail/online-contrast-sale.png')} />
              <Text style={styles.itemTitle}>销售顾问</Text>
            </View>
            <Text style={[styles.itemContent]}>{this.state.salerName}</Text>
          </View>
          <View style={styles.line} />

        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  section: {
    width: '100%',
    backgroundColor: '#fff',
    paddingTop: PxToDp(15),
    paddingBottom: PxToDp(20),
  },
  row: {
    flexDirection: 'row',
  },
  sectionTitle: {
    color: '#000000',
    fontSize: PxToDp(15),
  },
  itemTitle: {
    fontSize: PxToDp(12),
    color: '#121212',
    marginLeft: PxToDp(9),
  },
  itemContent: {
    fontSize: PxToDp(13),
    color: '#999',
  },
  linerTop: {
    width: '100%',
    paddingBottom: PxToDp(15),
  },
  itemLiner: {
    justifyContent: 'space-between',
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(17),
    marginTop: PxToDp(14),
  },
  linerName: {
    color: '#c4d2ff',
    fontSize: PxToDp(12),
    fontFamily: FontFamilys(),
    backgroundColor: 'transparent',
  },
  linerConT: {
    color: '#ffffff',
    fontSize: PxToDp(13),
    fontFamily: FontFamilys(),
    backgroundColor: 'transparent',
  },
  titleView: {
    height: PxToDp(38),
    justifyContent: 'center',
    backgroundColor: '#f8f8f9',
    paddingLeft: PxToDp(20),
  },
  conViewItem: {
    justifyContent: 'space-between',
    paddingTop: PxToDp(22),
    paddingLeft: PxToDp(22),
    paddingRight: PxToDp(19),
    height: PxToDp(47),
  },
  line: {
    width: '100%',
    height: PxToDp(0.5),
    backgroundColor: '#e8e8e8',
  },
});

export default PersonalInfo;
